<template>
  <el-card shadow="never">
    <el-button @click="dosaveIndent">生成订单</el-button>
    <el-button @click="doreturnBed">还床</el-button>
    <el-button @click="dopay">支付订单</el-button>


    <el-table :data="tableData" height="480" style="width: 100%; margin-bottom: 20px" row-key="permissionId" border fit>
      <el-table-column align="center" prop="indentId" label="订单编号" width="105" sortable></el-table-column>
      <el-table-column align="center" prop="userId" label="用户编号" width="105" sortable></el-table-column>
      <el-table-column align="center" prop="bedId" label="床编号" width="105" sortable></el-table-column>
      <el-table-column align="center" prop="indentNum" label="订单数量" width="105" sortable></el-table-column>
      <el-table-column align="center" prop="payTime" label="支付订单时间" sortable></el-table-column>
      <el-table-column align="center" prop="indentMoney" label="支付金额" sortable></el-table-column>
      <el-table-column align="center" prop="returnTime" label="订单结束时间" sortable></el-table-column>
      <el-table-column align="center" label="订单状态" width="105" sortable>
        <template slot-scope="scope">
          <el-tag :type="getTagType(scope.row)">
            {{ scope.row.indentStatus }}
          </el-tag>
        </template>
      </el-table-column>


      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button type="danger" @click="del(scope.row)" icon="el-icon-delete" size="mini"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="getTip(scope.row)" placement="top"
          >
            <el-button
                @click="faultUI(scope.row)"
                :type="getType(scope.row)"
                :disabled="scope.row.indentStatus==='故障'?true:false"
                :icon="getIcon(scope.row)" size="mini">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                   :current-page="pageInfo.page" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.size"
                   layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
    </el-pagination>


    <el-dialog title="故障上报" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="故障描述：" :label-width="formLabelWidth">
          <el-input v-model="form.faultName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="faultReporting">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import {findAll, doSaveOrUpdate, deleteByIndentId, updateById
,pay,returnBed,saveIndent} from "@/api/indent/index.js";

export default {
  mounted() {
    this.updateTable();
  },
  data() {
    return {
      tableData: [],
      fileList: [],
      form: {},
      dialogFormVisible: false,
      formLabelWidth: "180px",
      pageInfo: {
        total: 0,
        page: 1,
        size: 5
      },
      status: ''
    };
  },
  methods: {
    dopay(){
      this.form.bedId = 1;
      pay(this.form).then(r=>{
        this.updateTable();
      })
    },
    doreturnBed(){
      this.form.bedId = 1;
      returnBed(this.form).then(r=>{
        this.updateTable();
      })
    },
    dosaveIndent(){
      this.form.bedId = 1;
      this.form.userId = 1;
      saveIndent(this.form).then(r=>{
        this.updateTable();
      })
    },
    faultUI(row){
      this.dialogFormVisible = true;
      this.form = row;
    },
    faultUI1(){
      console.log(this.form);
    },

    // scope.row.indentStatus !='使用中'?'el-icon-setting':'el-icon-message'
    getIcon(row) {
      if (row.indentStatus == '已完成') {
        return 'el-icon-share'
      } else if (row.indentStatus == '使用中') {
        return 'el-icon-setting'
      } else {
        return 'el-icon-message'
      }
    },
    getType(row) {
      if (row.indentStatus == '已完成') {
        return 'success'
      } else if (row.indentStatus == '使用中') {
        return 'primary'
      } else {
        return 'warning'
      }
    },
    getTip(row) {
      if (row.indentStatus == '已完成') {
        return '使用反馈'
      } else if (row.indentStatus == '使用中') {
        return '故障上报'
      } else {
        return '已上报'
      }
    },
    getTagType(row) {
      if (row.indentStatus == '使用中') {
        this.status = '使用中'
        return 'primary'
      } else if (row.indentStatus == '故障') {
        this.status = '故障'
        return 'danger'
      } else {
        this.status = '已完成'
        return 'success'
      }
    },
    faultReporting() {
      updateById(this.form).then(res => {
        this.updateTable();
        this.$message.error("故障已上报,准备派遣维修人员前往维修,给您带来的不便,深感抱歉!")
      })
      this.dialogFormVisible = false;
    },
    handleSizeChange(size) {
      this.pageInfo.size = size;
      this.updateTable();
    },
    handleCurrentChange(page) {
      this.pageInfo.page = page;
      this.updateTable();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    addUI() {
      this.form = {},
          this.dialogFormVisible = true;
    },
    handlePreview() {

    },
    handleRemove() {

    },

    del(row) {
      this.$confirm("确认删除?")
          .then(() => {
            let indentId = row.indentId;
            deleteByIndentId(indentId).then(r => {
              if (r.code == 200) {
                this.updateTable();
                this.$message.success(r.msg);
                return;
              }
              this.$message.error(r.msg);

            });
          })
          .catch(() => {

          })

    },
    updateUI(row) {
      this.form = {};
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true;
    },
    saveOrUpdate() {
      doSaveOrUpdate(this.form).then(r => {
        if (r.code == 200) {
          this.dialogFormVisible = false;
          this.$message.success(r.msg);
          this.updateTable();
          this.fileList = []
        }
      })
    },

    updateTable() {
      findAll(this.pageInfo).then((r) => {
        this.tableData = r.data.list;
        this.pageInfo.total = r.data.total;
      });
    }
  }
}
</script>

<style scoped lang="less">
.el-pagination {
  text-align: left;
}
</style>